<template>
<div class="addresslist">
  <Header
    title="服务地址"
    @click-left="back"
  ></Header>
  <ul v-for="item in addressList" @click="clickAddress(item)">
    <li>{{item.PROVINCE}} {{item.CITY}} {{item.DISCRECT}} {{item.ADDRESS}}</li>
    <li>
      <span @click.stop="addAddress(item.ADDRESS_ID)">
        <img style="width: 14px;height: 14px;" src="../../assets/编辑.png" alt="">
        编辑
      </span>
      <span @click.stop="ITEM = item, delete_show = true">
        <img style="width: 13px;height: 14px;" src="../../assets/垃圾桶@2x.png" alt="">
        删除
      </span>
    </li>
  </ul>
  <van-empty
    style="width: 100%;height: 60%"
    v-show="addressList.length <= 0"
    class="custom-image"
    :image="require('../../assets/空两本书.png')"
    description=" 暂无服务地址"
  />
  <div style="height: 60px;"></div>
  <div class="bottom">
    <button @click="addAddress('')">新建地址</button>
  </div>
  <van-dialog v-model="delete_show"
              confirm-button-color="#1da4f2"
              @confirm="deleConfirm"
              title="确认删除该地址吗？" show-cancel-button>
  </van-dialog>
</div>
</template>

<script>
import Header from '../../components/Vue/Header'
export default {
  name: 'AddressList',
  components: {
    Header
  },
  data () {
    return {
      userid: this.$route.query.userid,
      addressList: [],
      delete_show: false,
      ITEM: [],
      fromPath: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      // 通过 `vm` 访问组件实例,将值传入fromPath
      vm.fromPath = from
      console.log(to)
      console.log(from)
    })
  },
  mounted () {
    this.getAddressList()
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 点击地址
    clickAddress (item) {
      let serviceJuJia = JSON.parse(sessionStorage.getItem('serviceJuJia'))
      serviceJuJia.address = item.PROVINCE + ' ' + item.CITY + ' ' + item.DISCRECT + ' ' + item.ADDRESS
      sessionStorage.setItem('serviceJuJia', JSON.stringify(serviceJuJia))

      let query = this.fromPath.query
      query.ADDRESS_ID = item.ADDRESS_ID
      this.$router.replace({path: '/ServiceItemsJuJia', query: query})
    },
    // 删除地址确认按钮
    deleConfirm () {
      this.$http.deleteAddress({ADDRESS_ID: this.ITEM.ADDRESS_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('删除成功')
            this.getAddressList()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 获取地址列表
    getAddressList () {
      this.$http.getMyAddresses({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.addressList = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 添加地址
    addAddress (ADDRESS_ID) {
      let query = this.fromPath.query
      if (ADDRESS_ID) {
        query.ADDRESS_ID = ADDRESS_ID
        this.$router.push({path: '/address/addressAdd',
          query: query})
      } else {
        query.ADDRESS_ID = ''
        this.$router.push({path: '/address/addressAdd', query: query})
      }
    }
  }
}
</script>

<style scoped lang="scss">
.addresslist{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
}
ul{
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 5px;
  background: #FFFFFF;
  li{
    min-height: 44px;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
  }
  li:last-child{
    display: flex;
    justify-content: flex-end;
    span{
      margin-left: 20px;
    }
  }
}
.bottom{
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  button{
    width: 95%;
    height: 44px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
  }
}
</style>
